<template>
    <div>
      <!--面包屑导航区域-->
      <el-breadcrumb :separator-icon="ArrowRight">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>个人主页</el-breadcrumb-item>
        <el-breadcrumb-item>事务管理</el-breadcrumb-item>
      </el-breadcrumb>

      <!--卡片视图区域-->
      <el-card class="box-card">
        <!--搜索与添加区域-->
        <el-row :gutter="20">
          <!--第一列-->
          <el-col :span="10">
             <!-- eslint-disable-next-line vue/no-parsing-error-->
            <el-input v-model="search" placeholder="请输入图书名称" clearable @clear="searchBtn">
               <template #append>
                 <el-button @click="searchBtn">搜</el-button>
               </template>
             </el-input>
          </el-col>
        </el-row>
      </el-card>

      <!--列表区域-->
      <el-card class="box-card2">
      <el-table :data="tableData" :header-cell-style="{textAlign: 'center'}" :cell-style="{ textAlign: 'center' }" border style="width: 100%"  stripe="true" >
        <el-table-column type="index"></el-table-column>
        <el-table-column prop="COMMENTS_TIME" label="回帖时间" width="200"></el-table-column>
        <el-table-column prop="TOPIC" label="图书名称" width="160"></el-table-column>
        <el-table-column prop="FORUM_CONTENT" label="详情内容"></el-table-column>
        <el-table-column prop="CONTENTS_ID" label="帖子编号" width="80"></el-table-column>
      </el-table>

     
      </el-card>

    </div>
</template>

<script>
import { computed, ref } from 'vue'
import axios from 'axios'
const search = ref('')
export default ({
  data () {
      return{
        search: '',
        tableData: [{COMMENTS_TIME:"",}],
        userid: window.sessionStorage.getItem("userid"),
      }
  },
  computed:{
    tableData() {
      let search = this.search;
      let list =this.tableData.filter(data => !search || data.TOPIC.toLowerCase().includes(search.toLowerCase())|| data.TOPIC.toLowerCase().includes(search.toLowerCase()));
      return list
    }
  },
  created () {
    this.getUserList()
  },
  methods: {
    async getUserList () {
      const { data: res } = await this.$http.get('users', {
        params: this.queryInfo
      })
      if (res.meta.status !== 200) return this.$message.error('获取用户列表失败')
      this.userlist = res.data.users
      this.total = res.data.total
      console.log(res)
    },
    // 监听pagesize改变的事件
    handleSizeChange (newSize) {
      console.log(newSize)
    },
    // 监听页码值改变的事件
    handleCurrentChange (newPage) {
      console.log(newPage)
    },
    
  },
  mounted () {
      axios({
        method: "get",
        params: {
          userid: this.userid,
        },
        url: "/api/Manage/ManageReturn",
      }).then(
        (res) => {
          console.log("111", res);
          this.$data.tableData = res.data;
        },
        (error) => {
          console.log("错误", error.message);
        }
      );
  }
})
</script>

<style lang="less" scoped>
.el-table .warning-row {
  --el-table-tr-bg-color: var(--el-color-warning-light-9);
}
.el-table .success-row {
  --el-table-tr-bg-color: var(--el-color-success-light-9);
}
.box-card{
  margin-top: 20px;
  margin-bottom: 10px;
  font-size: 20px;
  margin-left: 40px;
  margin-right: 60px;
}
.box-card2{
  margin-top: 20px;
  margin-bottom: 10px;
  font-size: 20px;
  margin-left: 40px;
  margin-right: 60px;
}
</style>
